<template>
  <div class="page-container">
    <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>拼团</el-breadcrumb-item>
        <el-breadcrumb-item>拼团参团团员管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size">
        <!-- 搜索条件部分 -->
        <el-row class="search-input">
          <el-form-item label="订单编号：">
            <el-input
              clearable
              v-model="filters.orderCode"
              placeholder="订单编号"
              maxlength="80"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户ID：">
            <el-input
              clearable
              v-model="filters.customerId"
              placeholder="用户ID"
              maxlength="80"
            ></el-input>
          </el-form-item>
          <el-form-item label="拼团活动ID：">
            <el-input
              clearable
              v-model="filters.activityId"
              placeholder="拼团活动ID"
              maxlength="80"
            ></el-input>
          </el-form-item>
        </el-row>
		<el-row class="times">
			<el-form-item label="订单状态：" prop="paymentStatus" >
				<el-select v-model="filters.paymentStatus" placeholder="订单状态" clearable>
					<el-option label="全部" value=""></el-option>
					<el-option label="未支付" value="0"></el-option>
					<el-option label="已支付" value="1"></el-option>
					<el-option label="已取消" value="2"></el-option>
				</el-select>
			</el-form-item>
            <el-form-item label="参团时间：" prop="startTime">
              <el-date-picker
                v-model="filters.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                clearable
                @change="changeStartDate"
                :picker-options="startDateDisabled"
                placeholder="开始时间"
                class="input_postion"
              >
              </el-date-picker>
            </el-form-item>
            <span class="times-to">-</span>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="filters.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                clearable
                @change="changeEndDate"
                :picker-options="endDateDisabled"
                placeholder="结束时间"
                class="input_postion"
              >
              </el-date-picker>
            </el-form-item>
          </el-row>

        <!-- 查询重置按钮部分 -->
        <el-row class="search-button-noborder">
          <el-form-item>
            <kt-button
              :label="$t('action.reset')"
              :plain="true"
              @click="reset"
              class="resetButton"
              icon="el-icon-refresh"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="el-icon-search"
              label="搜索"
              class="searchButton"
              @click="findPage(filters)"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </div>

    <!-- 刷洗 列表显示 导出功能按钮 -->
    <!-- <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
		<el-form :inline="true" :size="size">
			<el-form-item>
				<el-button-group>
				<el-tooltip content="刷新" placement="top">
					<el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
				</el-tooltip>
				<el-tooltip content="列显示" placement="top">
					<el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
				</el-tooltip>
				<el-tooltip content="导出" placement="top">
					<el-button icon="fa fa-file-excel-o"  @click="downloadExcel" ></el-button>
				</el-tooltip>
				</el-button-group>
			</el-form-item>
		</el-form>
		<table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns"
			@handleFilterColumns="handleFilterColumns">
		</table-column-filter-dialog>
	</div> -->
    <!--表格内容栏-->
    <CyTable
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      @findPage="findPage"
      :showOperation="false"
      ref="CyTable"
    >
    </CyTable>
    <!--新增编辑界面-->
    <el-dialog
      :title="operation ? '新增' : '编辑'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      @closed="handleClose"
      class="el-dialog-style"
    >
      <el-form
        :model="dataForm"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-width="130px"
        label-position="right"
        inline
      >
        <el-form-item label="ID" prop="id" v-if="false" class="mb30">
          <el-input
            clearable
            v-model="dataForm.id"
            :disabled="true"
            auto-complete="off"
          ></el-input>
        </el-form-item>

        <el-row>
          <el-form-item label="模板编号：" prop="number" class="mb30">
            <el-input
              clearable
              v-model="dataForm.number"
              auto-complete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="商家：" prop="business" class="mb30">
            <!-- <el-input clearable v-model="dataForm.business"  auto-complete="off" ></el-input> -->
            <el-select v-model="dataForm.business" placeholder="商家">
              <el-option label="录屏商家02" value="1">录屏商家02</el-option>
              <el-option label="育学园-商城" value="1">育学园-商城</el-option>
              <el-option label="张小二服饰" value="1">张小二服饰</el-option>
              <el-option label="育学园-商城" value="1">育学园-商城</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模板分类：" prop="type" class="mb30">
            <el-input
              clearable
              v-model="dataForm.type"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="模板名称：" prop="name" class="mb30">
            <el-input
              clearable
              v-model="dataForm.remains"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="模板附件：" prop="template" class="mb30">
            <el-input
              clearable
              v-model="dataForm.template"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="remark" class="mb30">
            <el-input
              clearable
              v-model="dataForm.remark"
              auto-complete="off"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row> </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button
          :size="size"
          type="primary"
          plain
          @click.native="dialogVisible = false"
          class="cancelButton"
          >{{ $t("action.cancel") }}</el-button
        >
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
          class="searchButton"
          >{{ $t("action.submit") }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
import XLSX from "xlsx";
import axios from "axios";
export default {
  components: {
    PopupTreeInput,
    CyTable,
    KtButton,
    TableColumnFilterDialog,
  },
  data() {
    return {
      size: "small",
      document_license: "",
      filters: {
        name: "",
      },
      value: 0,
      testdata: {},
      imgs: "",
      card: "",
      fileList: {},
      columns: [],
      tabJson: "",
      warehouselist: [],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      dialogImageUrl: "",

      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
      printPage: false,
      dialogVisibleImage: false,
      dataFormRules: {},
      dataForm: {},
      deptData: [],
      deptTreeProps: {
        label: "name",
        children: "children",
      },
      roles: [],
      startDateDisabled: {}, //开始时间限制
      endDateDisabled: {}, //结束时间限制
    };
  },
  methods: {
    changeStartDate: function () {
      var this_ = this;
      this_.endDateDisabled = {
        disabledDate: (time) => {
          if (this_.filters.startTime) {
            return (
              time.getTime() <= new Date(this_.filters.startTime).getTime()
            );
          }
        },
      };
    },
    changeEndDate: function () {
      var this_ = this;
      this_.startDateDisabled = {
        disabledDate: (time) => {
          if (this_.filters.endTime) {
            return time.getTime() >= new Date(this_.filters.endTime).getTime();
          }
        },
      };
    },
    // 获取分页数据
    findPage: function (data) {
      let joinTimeList =this.filters.joinTime
      if (joinTimeList != null) {
          this.filters.startTime = joinTimeList[0];
          this.filters.endTime = joinTimeList[1];
      }
      this.filters.url = "jic-market/PatchGrouponInstDetail/query";
      this.$refs.CyTable.findPage(this.filters);
    },

    //弹窗关闭方法
    handleClose() {
      this.$refs.dataForm.resetFields();
    },
    // 批量删除
    handleDelete: function (data) {
      //             var ids='';
      //             for(var i=0;i<data.params.length;i++){
      //                ids=ids+data.params[i].id+',';
      //             }
      //             data.t='chargeCard'
      //             data.ids=ids
      //             this.utils.request.deleteUserInfo(data,this.deleteInfoBack)
      this.$message({ message: "操作成功", type: "success" });
    }, //删除callback
    deleteInfoBack(data) {
      if (data.code == "0000") {
        this.$message({ message: "操作成功", type: "success" });
      } else {
        this.$message({ message: "操作失败, ", type: "error" });
      }
      this.findPage();
    },

    //列表下载
    downloadExcel() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
      })
        .then(() => {
          let filename = "库存盘点";
          this.$refs.CyTable.exportData(
            this.filters,
            this.filterColumns,
            filename
          );
        })
        .catch(() => {});
    },
    // 显示新增界面
    handleAdd: function () {
      this.dialogVisible = true;
      this.operation = true;
      this.dataForm.id = "";
      //this.dataForm={};
      if (this.$refs["dataForm"] != undefined) {
        this.$refs["dataForm"].resetFields();
      }
      this.dataForm.document_license = "";
    },
    // 打印
    print: function () {
      this.printPage = true;
      this.operation = true;
    },
    reset: function () {
      //需要校验的keys
      let keys = [
        "orderCode",
        "customerId",
        "activityId",
        "startTime",
        "joinTime",
		"endTime",
		"paymentStatus"
      ];

      this.filters = {};
      this.findPage();
    },

    // 显示编辑界面
    handleEdit: function (params) {
      this.dialogVisible = true;
      this.operation = false;
      var this_ = this;
      this.$nextTick(function () {
        this_.dataForm = Object.assign({}, params);
      });
      // var search={};
      // search.id=params.row.id
      // search.t="chargeCard";

      // this.utils.request.queryUserInfo(search,function(res){

      //     if(res.code == "0000"){
      // 		}else{
      // 			this_.$message({message: '获取产品信息异常', type: 'error'});
      // 		}

      // })
    },
    // 编辑
    submitForm: function () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            // 	                    var this_ = this;
            //                         this.editLoading = true
            //                         let params = Object.assign({}, this.dataForm)
            //                         params.t='chargeCard';
            //                         this.utils.request.editUserInfo(params,this.editInfoBack)
            this.$message({ message: "操作成功", type: "success" });
            this.dialogVisible = false;
          });
        }
      });
    }, // 新增修改回调
    editInfoBack: function (data) {
      if (data.code == "0000") {
        this.$message({ message: "操作成功", type: "success" });
      } else {
        this.$message({ message: "操作失败", type: "error" });
      }
      this.findPage();
      this.dialogVisible = false;
      this.operation = false;
      this.editLoading = false;
    },

    // 时间格式化
    dateFormat: function (row, column, cellValue, index) {
      return format(row[column.property]);
    },

    // 处理表格列过滤显示
    displayFilterColumnsDialog: function () {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function (data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function () {
      this.columns = [
        //{prop:"id", label:"ID", minWidth:50},
        { prop: "customerId", label: "用户ID", minWidth: 120 },
        { prop: "orderCode", label: "订单编号", minWidth: 120 },
        { prop: "activityId", label: "拼团活动ID", minWidth: 120 },
        { prop: "promName", label: "拼团活动名称", minWidth: 120 },
        { prop: "joinTime", label: "参团时间", minWidth: 120 },
        { prop: "paymentTypeName", label: "支付方式", minWidth: 120 },
        { prop: "paymentStatusName", label: "状态", minWidth: 120 },
      ];
      this.filterColumns = JSON.parse(JSON.stringify(this.columns));
    },
  },
  mounted() {
    this.initColumns();
  },
};
</script>

<style scoped lang="scss">
</style>
